import React, { Component } from "react";
import { NavBar, Icon, Tabs, Toast } from "antd-mobile";
import "./GoodList.scss";
import SearchInput from "../searchInput/SearchInput";
import emptyProduct from "../../assets/images/empty_product.jpg";
import myaxios from "../../utils/myaxios";

export default class GoodList extends Component {
  constructor(props) {
    super(props);
    // 列表的引用
    this.goodListRef = React.createRef();
    this.pagesize = 10; // 默认返回的每条请求的数量
    this.pagenum = 1; //
  }
  state = {
    tabs: [{ title: "综合" }, { title: "销量" }, { title: "价格" }],
    goods: [],
  };
  componentDidMount() {
    // 判断是从哪里点击进来页面的
    let { search } = this.props.location;
    let params = search.split("?")[1] || "";
    let params_arr = params.split("=");

    if (params_arr[0] === "cid") {
      this.cid = params_arr[1];
    } else if (params_arr[0] === "query") {
      this.query = params_arr[1];
    }
    // 获取根据点击获取数据
    this.getProductList();
    //注册滚动监听事件
    console.log(this.goodListRef.current);
    this.goodListRef.current.parentElement.addEventListener(
      "scroll",
      this.handleScroll
    );
  }
  handleScroll = () => {
    let parentElement = this.goodListRef.current.parentElement;
    //客户端高度
    let clientHeight = parentElement.clientHeight;
    //列表高度
    let scrollHeight = parentElement.scrollHeight;
    //列表滚动高度
    let scrollTop = parentElement.scrollTop;
    if (scrollHeight - clientHeight - scrollTop <= 1) {
      console.log("触底了");
      this.getProductList();
    }
  };
  //组件即将被移除触发
  componentWillUnmount() {
    // 卸载监听事件
    this.goodListRef.current.parentElement.removeEventListener(
      "scroll",
      this.handleScroll
    );
  }
  //获取产品的列表
  getProductList = () => {
    // 拼接的参数
    let params = {};
    if (this.cid) {
      params["cid"] = this.cid;
    } else if (this.query) {
      params["query"] = decodeURIComponent(this.query);
    }
    //如果页码存在
    if (this.total) params["pagenum"] = ++this.pagenum;
    else params["pagenum"] = this.pagenum;
    // 默认页码
    params["pagesize"] = this.pagesize;
    //如果当前的页码大于总的页面
    if (this.pagenum > Math.ceil(this.total / this.pagesize)) {
      Toast.info("已经是最后一条数据啦", 1);
    } else {
      myaxios
        .get("goods/search", {
          params: params,
        })
        .then((res) => {
          this.total = res.total;
          this.pagenum = res.pagenum;
          this.setState({
            goods: [...this.state.goods, ...res.goods], // 追加数据
          });
        })
        .catch((err) => console.log(err));
    }
  };
  // 点击跳转
  handleItemClick = (goods_id) => {
    this.props.history.push("/goodDetail/" + goods_id);
  };

  render() {
    return (
      <div className="yg-gl">
        {/* 商品列表开始 */}
        <div className="yg-gl-nav">
          <NavBar
            className="gl-nav"
            icon={<Icon type="left" />}
            onLeftClick={() => window.history.go(-1)}
          >
            商品列表
          </NavBar>
        </div>
        {/* 商品列表结束 */}
        {/* 商品列表开始 */}
        <div className="yg-gl-search">
          <SearchInput></SearchInput>
        </div>
        {/* 商品列表结束 */}
        {/* tab切换栏开始 */}
        <div className="yg-gl-tab">
          <Tabs
            tabs={this.state.tabs}
            initialPage={0}
            tabBarUnderlineStyle={{ borderColor: "red" }}
            tabBarTextStyle={{ fontWeight: "200", color: "black" }}
          >
            <div className="gl-tab-zh" ref={this.goodListRef}>
              {this.state.goods.map((v) => {
                return (
                  <div
                    className="tab-zh-item"
                    key={v.goods_id}
                    onClick={this.handleItemClick.bind(this, v.goods_id)}
                  >
                    <div className="zh-item-left">
                      <img
                        src={
                          v.goods_small_logo ? v.goods_small_logo : emptyProduct
                        }
                        alt=""
                      />
                    </div>
                    <div className="zh-item-right">
                      <div className="item-right-title">{v.goods_name}</div>
                      <div className="item-right-price">￥{v.goods_price}</div>
                    </div>
                  </div>
                );
              })}
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "150px",
                backgroundColor: "#fff",
              }}
            >
              销量
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "150px",
                backgroundColor: "#fff",
              }}
            >
              价格
            </div>
          </Tabs>
        </div>
        {/* tab切换栏结束 */}
      </div>
    );
  }
}
